<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'

import { SubmitBtn } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import PriceInput from './price-input.vue'

const emits = defineEmits(['batchPrice'])
const visible = defineModel<boolean>('visible', { required: true })

type Istate = {
    skuPrice: string
    skuPriceIntroduce: string
    skuPriceType: number
}
const initialState = {
    skuPrice: '',
    skuPriceIntroduce: '',
    skuPriceType: 0,
}

const { createMessage } = useMessage()
const form = ref()
const state = ref<Istate>(cloneDeep(initialState))

const rules = computed(() => {
    return state.value.skuPriceType === 3
        ? {
                skuPriceType: [
                    {
                        message: '请选择价格类型',
                        required: true,
                    },
                ],
            }
        : {
                skuPrice: [
                    {
                        message: '请填写价格',
                        required: true,
                    },
                ],
                skuPriceType: [
                    {
                        message: '请选择价格类型',
                        required: true,
                    },
                ],
            }
})

const columns: PlusColumn[] = [
    {
        label: '价格类型',
        options: async () => [
            {
                label: '区间参考价',
                value: 0,
            },
            {
                label: '固定参考价',
                value: 1,
            },
            {
                label: '固定成交价',
                value: 2,
            },
            {
                label: '询价',
                value: 3,
            },
        ],
        prop: 'skuPriceType',
        valueType: 'select',
        width: 120,
    },
    {
        label: '价格',
        prop: 'skuPrice',
        width: 120,
    },
    {
        fieldProps: {
            autosize: { maxRows: 4, minRows: 2 },
            maxlength: 10,
            placeholder: '如：起订量3000，付款方式20%货款',
            showWordLimit: true,
        },
        label: '价格说明',
        prop: 'skuPriceIntroduce',
        valueType: 'textarea',
    },
]

function cancel() {
    visible.value = false
}

function reset() {
    form.value.formInstance.resetFields()
}

async function confirm() {
    const valid = await form.value.formInstance.validate()
    if (valid || state.value.skuPriceType === 3) {
        const params = {
            ...state.value,
        }
        emits('batchPrice', params)
        createMessage.success('操作成功')
        cancel()
    }
}
</script>

<template>
    <PlusDialog v-model="visible"
                title="批量价格"
                width="600"
                close-on-press-escape
                @cancel="cancel"
                @closed="reset"
    >
        <PlusForm ref="form"
                  v-model="state"
                  :columns="columns"
                  :label-width="100"
                  :rules="rules"
                  :has-footer="false"
        >
            <template #plus-field-skuPrice>
                <PriceInput v-model:skuPrice="state.skuPrice"
                            v-model:skuPriceType="state.skuPriceType"
                />
            </template>
        </PlusForm>

        <template #footer>
            <div class="mx-auto">
                <el-button @click="cancel">
                    取消
                </el-button>

                <SubmitBtn type="primary"
                           class="ml10"
                           @click="confirm"
                >
                    确定
                </SubmitBtn>
            </div>
        </template>
    </PlusDialog>
</template>
